<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2023-09-12 17:59:04
 * @LastEditTime: 2024-05-31 17:37:03
 * @FilePath: \vue-admin-template\src\components\issueInvioce\module\Information.vue
-->
<template>
  <div>
    <el-card>
      <!-- 头部 -->
      <div class="header">
        <span class="title">{{title}}</span>
        <el-button
          type="text"
          plain
          :icon="showInfo ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" 
          @click="handShow()"
        >{{showInfo ? '收起更多' : '查看更多'}}
        </el-button>
      </div>
      <!-- 内容 -->
      <div>
        <slot></slot>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props:{
    title: {
      type: String,
      default: '',
    },
    showInfo: {
      type: Boolean,
      default: false,
    },
  },
  methods:{
    handShow() {
      this.$emit("update:showInfo", !this.showInfo);
    }
  }
}
</script>

<style lang="scss" scoped>
  .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .title{
      font-size: 17px;
      font-weight: 700;
    }
  }
</style>